---
title: Stat
description: Used to display a statistic with a title and value.
links:
  source: components/stat
  storybook: components-stat--basic
  recipe: stat
---

<ExampleTabs name="stat-basic" />

## Usage

```tsx
import { Stat } from "@chakra-ui/react"
```

```tsx
<Stat.Root>
  <Stat.Label />
  <Stat.ValueText />
  <Stat.HelpText />
  <Stat.UpIndicator />
</Stat.Root>
```

## Examples

### Format Options

Use the `FormatNumber` component within `Stat.ValueText` to format the value.

<ExampleTabs name="stat-with-format-options" />

### Indicator

Here's an example of how to display a statistic with an indicator.

<ExampleTabs name="stat-with-indicator" />

### Info Tip

Compose the `InfoTip` and `Stat.Label` components to display an info tip.

<ExampleTabs name="stat-with-info-tip" />

### Value Unit

Here's an example of how to display a value with a unit.

<ExampleTabs name="stat-with-value-unit" />

### Progress Bar

Here's an example of how to display a statistic with a progress bar.

<ExampleTabs name="stat-with-progress-bar" />

### Icon

Here's an example of how to display a statistic with an icon.

<ExampleTabs name="stat-with-icon" />

### Trend

Here's an example of how to display a statistic with a trend indicator.

<ExampleTabs name="stat-with-trend" />

### Closed Component

Here's how to setup the Stat for a closed component composition.

<ExampleCode name="stat-closed-component" />

## Props

### Root

<PropTable component="Stat" part="Root" />
